export default Behavior({
    data: {
        drag: {
            source: {},
            sourceIndex: null,
            targetIndex: null,
            src: "",
            start: null,
            end: null,
            width: null,
            height: null,
            top: null,
            left: null,
            startX: null,
            startY: null,
            move: [],
            bounds: [],
            points: []
        },
    },
    methods: {
        getDragData() {
            return this.data.drag;
        },
        handleTouchStart() {
            // const { sourceIndex } = this.data.drag;
            // console.log("handleTouchStart", e);
            // if (sourceIndex === null) {
            //     return;
            // }
        },
        handleTouchMove(payload) {
            const event = payload.event;
            const { sourceIndex } = this.data.drag;
            if (sourceIndex === null) {
                return 10;
            }
            const { clientX, clientY } = event.touches[0] || {};
            const {
                startX, startY, top, left, bounds
            } = this.data.drag;
            const calcX = clientX;
            const calcY = clientY;
            const move = [left + calcX - startX, top + calcY - startY];
            if (move[0] <= 0) {
                move[0] = 0;
            }
            if (move[1] <= 0) {
                move[1] = 0;
            }
            if (move[0] >= bounds[0]) {
                move[0] = bounds[0];
            }
            if (move[1] >= bounds[1]) {
                move[1] = bounds[1];
            }
            this.setData({
                "drag.move": move,
            });
            this.calcDragPositionAndSet();
            return 20;
        },
        handleTouchEnd() {
            const { sourceIndex } = this.data.drag;
            if (sourceIndex === null) {
                return;
            }
            this.dragEnd();
            // console.log("handleTouchEnd", e);
        },
        handleTouchCancel() {
            const { sourceIndex } = this.data.drag;
            if (sourceIndex === null) {
                return;
            }
            this.dragEnd();
            // console.log("handleTouchCancel", e);
        },
        calcDragPositionAndSet() {
            const {
                move,
                points,
                width,
                height,
                source,
                targetIndex
            } = this.data.drag;
            const drag = {};
            const list = this.data.list;
            // console.log("???list", list);
            const center = [move[0] + width / 2, move[1] + height / 2];
            for (let i = 0; i < points.length; i++) {
                const cur = points[i];
                const xCross = center[0] - cur.northWest[0] >= 0 && center[0] - cur.southEast[0] <= 0;
                const yCross = center[1] - cur.northWest[1] >= 0 && center[1] - cur.southEast[1] <= 0;
                if (xCross && yCross) {
                    if (cur.index !== targetIndex) {
                        list.splice(targetIndex, 1);
                        // console.log("yesBaby", c, list[sourceIndex], cur.index);
                        list.splice(cur.index, 0, source);
                        drag["drag.targetIndex"] = cur.index;
                    }
                    break;
                }
                // console.log("333");
                // if (i + 1 === points.length && targetIndex && targetIndex !== sourceIndex) {
                //     list.splice(targetIndex, 1);
                //     list.splice(sourceIndex, 0, source);
                // }
            }
            drag.list = list;
            // console.log("???list-new", list);
            this.setData(drag);
        },
        handleLongPress(e) {
            if (!this.data.dragModel) {
                return;
            }
            const { item, index } = e.currentTarget.dataset;
            const drag = {};
            const parentNode = {};
            this.getRect(".ask-image-box")
                .then(r => {
                    const cur = r;
                    parentNode.left = cur.left;
                    parentNode.top = cur.top;
                    parentNode.width = cur.width;
                    parentNode.height = cur.height;
                    return this.getRect(".aib-item-image", true);
                })
                .then(r => {
                    let cur = {};
                    const points = r.map(point => {
                        const { index: pointIndex } = point.dataset;
                        if (pointIndex === index) {
                            cur = point;
                        }
                        const _top = point.top - parentNode.top;
                        const _left = point.left - parentNode.left;
                        return {
                            index: pointIndex,
                            northWest: [_left, _top],
                            southEast: [_left + point.width, _top + point.height]
                        };
                    });
                    const { clientX, clientY } = e.touches[0] || {};
                    // const itemColumn = Math.ceil((index + 1) / 4) - 1;
                    // const itemRow = (index + 1) % 4 === 0 ? 4 : (index + 1) % 4;
                    const top = cur.top - parentNode.top;
                    const left = cur.left - parentNode.left;
                    drag["drag.src"] = item.src || item.filePath;
                    drag["drag.sourceIndex"] = index;
                    drag["drag.targetIndex"] = index;
                    drag["drag.width"] = cur.width;
                    drag["drag.height"] = cur.height;
                    drag["drag.top"] = top;
                    drag["drag.left"] = left;
                    drag["drag.startX"] = clientX;
                    drag["drag.startY"] = clientY;
                    drag["drag.bounds"] = [parentNode.width - cur.width, parentNode.height - cur.height];
                    drag["drag.move"] = [left, top];
                    drag["drag.points"] = points;
                    drag["drag.source"] = item;
                    this.setData(drag);
                })
                .catch(() => {});
        },
        dragEnd() {
            const drag = {};
            drag["drag.src"] = "";
            drag["drag.sourceIndex"] = null;
            drag["drag.targetIndex"] = null;
            this.setData(drag);
            this.triggerEvent("update", {
                type: "drag",
                list: this.data.list,
            });
        },
    },
});
